<template>
	<view>

		<scroll-view scroll-x class="scroll-row" :scroll-into-view="scrollInto" scroll-with-animation style="height: 100rpx">
			<view class="scroll-row-item px-3 py-1 font-md" :id="'tab'+scrollInto" v-for="(item,index) in tabBars" :key="index" @click="changeTab(index)" :class="tabIndex===index ? 'text-main font-lg font-weight-bold':''">{{item.name}}</view>
		</scroll-view>
		<swiper :duration="150" :current="tabIndex" @change="onChangeTab" :style="'height:'+scrollH+'px;'">
			<!-- 横向滚动数据  好比轮播图 -->
			<swiper-item v-for="(item,index) in newsList" :key="index">
				<scroll-view :style="'height:'+scrollH+'px;'" scroll-y="true" @scrolltolower="loadmore(index)">
					<!-- 如果数组有数据显示内容 -->
					<template v-if="item.list.length>0">
						<block v-for="(item2,index2) in item.list" :key="index2">
							<!-- 显示数据 -->
							<common-list :index="index2" :item="item2" @follow="follow" @doSupport="doSupport"></common-list>
							<!-- 全局分割线 -->
							<div-ider></div-ider>
						</block>
						<!-- 下拉加载 -->
						<load-more :loadmore="item.loadmore"></load-more>
					</template>
					<!-- 如果数组为空显示暂无数据 -->
					<template v-else>
					<no-thing></no-thing>
					</template>
				</scroll-view>
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	// 列表内容区域
	import CommonList from '@/components/common/common-list.vue'
	//   全局分割线
	import divIder from '@/components/common/divider.vue'
 // 下拉加载事件
 import loadMore from '@/components/common/load-more.vue'
 // 暂无数据
  import noThing from '@/components/common/no-thing.vue'
	const demo = [{
			username: "昵称",
			userpic: "/static/topboy.png", //头像
			newstime: "2020-12-10下午4.30", //时间
			isFollow: false, //判断当前用户是否已经关注
			title: "我是标题", //标题
			titlepic: "/static/demo/banner2.jpg", //标题下的图片

			support: {
				// 点赞 反赞
				type: "",
				support_count: 0,
				unsupport_count: 0,
			},
			// 评论
			comment_count: 0,
			// 分享
			share_num: 0,
		},
		{
			username: "昵称",
			userpic: "/static/topboy.png", //头像
			newstime: "2020-12-10下午4.30", //时间
			isFollow: false, //判断当前用户是否已经关注
			title: "我是标题", //标题
			support: {
				// 点赞 反赞
				type: "",
				support_count: 0,
				unsupport_count: 0,
			},
			// 评论
			comment_count: 0,
			// 分享
			share_num: 0,
		},
	];
	export default {
		components: {
			CommonList,
			divIder,
			loadMore,
			noThing
		},
		data() {
			return {
				tabBars: [

					{
						name: "关注",
					},
					{
						name: "推荐",
					},
					{
						name: "体育",
					},
					{
						name: "热点",
					},
					{
						name: "财经",
					},
					{
						name: "娱乐",
					},
					{
						name: "军事",
					},
					{
						name: "历史",
					},
					{
						name: "本地",
					},
				],
				scrollInto: "",
				tabIndex: 0,
				scrollH: 500, //可视区域的高度,
				// 循环顶部导航栏生成的数据
				newsList: []
			}
		},
		 // 监听搜索输入框的点击事件
			onNavigationBarSearchInputClicked(){
			 uni.navigateTo({
			 	url:'../search/search'
			 })
		},
		// 监听点击(铅笔图标)发布事件
		onNavigationBarButtonTap(){
			uni.navigateTo({
				url:'../add-input/add-input'
			})
		},
		onLoad() {

			uni.getSystemInfo({
				success: (res) => {
					console.log(res)
					this.scrollH = res.windowHeight - uni.upx2px(100);
				}
			});
			// 根据导航栏生成列表数据
			this.getData();
		},
		methods: {
			// 上拉加载
			loadmore(index) {
				console.log(index)
				// 拿到当前列表
				let item = this.newsList[index];
				// 防止触底一直请求数据  !== '上拉加载更多'意思在加载中就什么也不做
				if (item.loadmore !== '上拉加载更多') return;  
					item.loadmore = '加载中...';
					setTimeout(() => {
						item.list = [...item.list, ...item.list]
						this.newsList[index].loadmore = '上拉加载更多';

					}, 3000)
				 

			},
			getData() {
				// 有几个列表就生成多少数据
				var arr = [];
				for (let i = 0; i < this.tabBars.length; i++) {
					let obj = {
						list: [],
						loadmore: "上拉加载更多",
					};
					if (i < 2) {
						obj.list = demo;
					}
					arr.push(obj);
					this.newsList = arr;
					console.log(arr)
				}
			},
			// 内容区域滑动改变顶部导航栏滑动
			onChangeTab(e) {
				console.log(e)
				this.changeTab(e.detail.current)
			},
			changeTab(index) {
				if (this.tabIndex === index) {
				  return;
				}
				this.tabIndex = index;
				this.scrollInto = "tab" + index;
				console.log(index)
				
			},
			follow(e) {
				console.log(e)
				let list = this.newsList[this.tabIndex].list[e].isFollow = true;
				uni.showToast({
					title: "关注成功"
				});
			},
			doSupport(e) {
				console.log(e)
				// tabIndex是第几页的数据
				// 拿到当前的对象
				let item = this.newsList[this.tabIndex].list[e.index];
				// 提示框数据
				let msg = e.type === 'support' ? '顶' : '踩';
				// 未点赞和取消
				if (item.support.type === '') {
					// 点的那个赋值未那个(support 或 unsupport)
					// item.support.type=e.type;
					item.support[e.type + '_count']++ //顶或踩++


				}
				// 之前点赞 但是现在的操作是踩 那么取消之前的顶选中现在的踩
				if (item.support.type === 'support' && e.type === 'unsupport') {
					// 顶--
					item.support.support_count--;
					// 踩++
					item.support.unsupport_count++;
				} else if (item.support.type === 'unsupport' && e.type === 'support') {
					// 顶++
					item.support.support_count++;
					// 踩--
					item.support.unsupport_count--;
				}
				// 把最新的状态再次改为e.type
				item.support.type = e.type;
				uni.showToast({
					title: msg
				})
			}
		}
	}
</script>

<style>

</style>
